<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>候诊管理</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome 图标 -->
    <link href="/css/all.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 2rem;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
        }
        .action-buttons button {
            margin-right: 5px;
        }
        .status-badge {
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        .status-waiting {
            background: rgba(243, 246, 250, 1);
            color: #495057;
        }
        .status-called {
            background: rgba(220, 231, 242, 1);
            color: #0d6efd;
        }
        .status-consulting {
            background: rgba(203, 230, 253, 1);
            color: #0dcaf0;
        }
        .status-finished {
            background: rgba(218, 235, 213, 1);
            color: #198754;
        }
        .status-cancelled {
            background: rgba(248, 215, 218, 1);
            color: #dc3545;
        }
        .arrival-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 20px;
            font-size: 0.75rem;
        }
        .arrived {
            background-color: #d1e7dd;
            color: #198754;
        }
        .not-arrived {
            background-color: #f8d7da;
            color: #dc3545;
        }
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .header-container {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }
        .call-btn {
            background-color: #0d6efd;
            color: white;
            transition: all 0.2s;
        }
        .call-btn:hover {
            background-color: #0b5ed7;
            transform: translateY(-1px);
        }
        .consult-btn {
            background-color: #0dcaf0;
            color: white;
            transition: all 0.2s;
        }
        .consult-btn:hover {
            background-color: #0bb3d0;
            transform: translateY(-1px);
        }
        .finish-btn {
            background-color: #198754;
            color: white;
            transition: all 0.2s;
        }
        .finish-btn:hover {
            background-color: #157342;
            transform: translateY(-1px);
        }
        .cancel-btn {
            background-color: #dc3545;
            color: white;
            transition: all 0.2s;
        }
        .cancel-btn:hover {
            background-color: #bb2d3b;
            transform: translateY(-1px);
        }
    </style>
</head>
<body>

<div class="container">

    <div class="header-container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h2 class="mb-0"><i class="fas fa-hospital-user me-2"></i>候诊管理</h2>
                <p class="text-muted mb-0">管理患者候诊队列</p>
            </div>
            <div>
                <button class="btn btn-primary me-2" id="refreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>刷新队列
                </button>
            </div>
        </div>
    </div>

    <!-- 候诊列表 -->
    <div class="table-container">
        <table class="table table-hover mb-0">
            <thead class="table-light">
            <tr>
                <th>排名</th>
                <th>用户名</th>
                <th>是否到达</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="waitingTableBody">
            <tr>
                <td colspan="5" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function () {
        // 状态文本映射
        const statusText = {
            '1': '等待中',
            '2': '已叫号',
            '3': '就诊中',
            '4': '已结束',
            '5': '已取消'
        };

        // 状态类名映射
        const statusClass = {
            '1': 'status-waiting',
            '2': 'status-called',
            '3': 'status-consulting',
            '4': 'status-finished',
            '5': 'status-cancelled'
        };

        // 获取候诊数据并渲染表格
        function loadWaitingList() {
            $.get('/admins/getAllWaitingList', function (data) {
                const tbody = $('#waitingTableBody');
                tbody.empty();

                if (!data || data.length === 0) {
                    tbody.append('<tr><td colspan="5" class="text-center">暂无候诊患者</td></tr>');
                    return;
                }

                data.forEach(waitingDetail => {
                    const row = `
                    <tr>
                        <td>${waitingDetail.id}</td>
                        <td>${waitingDetail.userName}</td>
                        <td>
                            <span class="arrival-badge ${waitingDetail.arrival ? 'arrived' : 'not-arrived'}">
                                ${waitingDetail.arrival ? '已到达' : '未到达'}
                            </span>
                        </td>
                        <td>
                            <span class="status-badge ${statusClass[waitingDetail.status]}">
                                ${statusText[waitingDetail.status]}
                            </span>
                        </td>
                        <td class="action-buttons">
                            <button class="btn btn-sm call-btn" data-id="${waitingDetail.id}" ${waitingDetail.status !== 1 ? 'disabled' : ''}>
                                <i class="fas fa-bell me-1"></i>叫号
                            </button>
                            <button class="btn btn-sm consult-btn" data-id="${waitingDetail.id}" ${waitingDetail.status !== 2 ? 'disabled' : ''}>
                                <i class="fas fa-user-md me-1"></i>接诊
                            </button>
                            <button class="btn btn-sm finish-btn" data-id="${waitingDetail.id}" ${waitingDetail.status !== 3 ? 'disabled' : ''}>
                                <i class="fas fa-check me-1"></i>结束
                            </button>
                            <button class="btn btn-sm cancel-btn" data-id="${waitingDetail.id}" ${waitingDetail.status === 4 || waitingDetail.status === 5 ? 'disabled' : ''}>
                                <i class="fas fa-times me-1"></i>取消
                            </button>
                        </td>
                    </tr>
                `;
                    tbody.append(row);
                });
            }).fail(function () {
                $('#waitingTableBody').append('<tr><td colspan="5" class="text-center text-danger">数据加载失败</td></tr>');
            }).always(function() {
                // 确保DOM更新完成后绑定事件（只绑定一次）
                bindActionButtons();
            });
        }

        // 绑定操作按钮事件（使用事件委托，且只绑定一次）
        function bindActionButtons() {
            // 先移除之前的事件绑定（避免重复绑定）
            $(document).off('click', '.call-btn');
            $(document).off('click', '.consult-btn');
            $(document).off('click', '.finish-btn');
            $(document).off('click', '.cancel-btn');

            // 重新绑定事件
            $(document).on('click', '.call-btn', function() {
                const id = $(this).data('id');
                callPatient(id);
            });

            $(document).on('click', '.consult-btn', function() {
                const id = $(this).data('id');
                consultPatient(id);
            });

            $(document).on('click', '.finish-btn', function() {
                const id = $(this).data('id');
                finishPatient(id);
            });

            $(document).on('click', '.cancel-btn', function() {
                const id = $(this).data('id');
                cancelPatient(id);
            });
        }

        // 叫号操作
        function callPatient(id) {
            if (!confirm('确定要呼叫该患者吗？')) return;

            $.ajax({
                url: '/admins/setCallTime?id=' + id,
                type: 'POST',
                success: function() {
                    alert('叫号成功');
                    loadWaitingList();
                },
                error: function() {
                    alert('叫号失败，请重试');
                }
            });
        }

        // 接诊操作
        function consultPatient(id) {
            if (!confirm('确定要开始接诊该患者吗？')) return;

            $.ajax({
                url: '/admins/consultWaiting/' + id,
                type: 'POST',
                success: function() {
                    alert('接诊成功');
                    loadWaitingList();
                },
                error: function() {
                    alert('接诊失败，请重试');
                }
            });
        }

        // 结束操作
        function finishPatient(patientId) {
            if (!confirm('确定要结束该患者的就诊吗？')) return;

            $.ajax({
                url: '/admins/finishWaiting/' + patientId,
                type: 'PUT',
                success: function() {
                    alert('就诊结束');
                    loadWaitingList();
                },
                error: function() {
                    alert('结束失败，请重试');
                }
            });
        }

        // 取消操作
        function cancelPatient(id) {
            if (!confirm('确定要取消该患者的就诊吗？')) return;

            $.ajax({
                url: '/admins/cancelWaiting/' + id,
                type: 'PUT',
                success: function() {
                    alert('已取消就诊');
                    loadWaitingList();
                },
                error: function() {
                    alert('取消失败，请重试');
                }
            });
        }

        // 页面加载时获取候诊列表
        loadWaitingList();

        // 绑定刷新按钮事件
        $('#refreshBtn').click(function() {
            loadWaitingList();
        });
    });
</script>

</body>
</html>